<!-- 项目结果公示 -->
<template>
    <section class="product-manage-page">
      <div class="product-manage-mobile-page">11112</div>
      <div class="product-manage-pc-page">
        <section class="page-com" id="page" ref="page">
          <!-- 头部导航栏 -->
          <HeaderCom />
          <div class="banner">
            <img
              class="banner-bg"
              src="@/assets/images/productManage/banner.png"
              alt=""
              srcset=""
            />
            <p class="banner-text">创意探索 勇敢突破</p>
          </div>
          <div class="main">
            <div class="nav-com">
                    <el-breadcrumb
                        separator-class="el-icon-arrow-right"
                        style="margin-bottom: 20px"
                    >
                        <el-breadcrumb-item>首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ name: 'productManage' }"
                        >实践项目</el-breadcrumb-item
                        >
                        <el-breadcrumb-item>
                        <span style="color: #3d6cb0">结果公示详情</span>
                        </el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
            <div class="center" v-if="info.title">
                <div class="resut-title">{{info.title || '--'}}结果公布</div>
                <div class="sub-title">发布时间：{{ info.releaseTime }}</div>
                <div class="content-block">
                    <div class="content-text" v-html="info.resultConnect">
                    </div>
                    <p class="source-from">发布单位：{{ info.releaseUnit || '--' }}</p>
                    <p class="source-from">2022年3月20日</p>
                </div>
                <div class="hight-light">关联项目 <span @click="$router.push({name: 'productDetail', query: {id: info.projectId}})">{{ productInfo.title }}</span></div>
                <div class="pdf-title" v-if="info.annexList && info.annexList.length">相关附件：</div>
                <div class="pdf-box" v-if="info.annexList">
                    <div class="pdf-item" v-for="(item, index) in info.annexList" @click="openDownload(item)" :key="index">
                        <img style="width:43px" src="@/assets/images/productManage/pdf.png" alt="">
                        <div class="file-name">{{ item.annexName }}</div>
                    </div>
                </div>
            </div>
        </div>
          <div class="mainFooter" id="pageFooter">
            <FooterMenu />
          </div>
        </section>
      </div>
    </section>
  </template>
  
  <script>
  import Vue from "vue";
  import FooterMenu from "@/components/footerMenu/index.vue";
  import HeaderCom from "@/components/header";
  import {
    getProjectResultById,
    getPraxisProjectItem,
  } from "../../request/api";
  export default {
    // 组件名称
    name: "productResultDetail",
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: { HeaderCom, FooterMenu },
    // 组件状态值
    data() {
      return {
        info: {},
        id: '',
        productInfo:{
            title: ''
        }
      };
    },
    created() {
      this.id = this.$route.query.id
      this.init();
    },
    // 组件方法
    methods: {
        openDownload(item) {
            window.open(item.annexUrl, '_blank')
        },
        getProductInfo(id) {
            getPraxisProjectItem({id}).then((res) => {
                if (res.code === 0 && res.data) {
                    this.productInfo = res.data
                }
            });
        },
      init() {
        getProjectResultById({ id: this.id }).then((res) => {
            if (res && res.code === 0 ){
              this.info = res.data
              this.getProductInfo(this.info.projectId)
            }
          });
      },
    },
  };
  </script>
  <style lang="less" scoped>
  .product-manage-page {
    position: relative;
    height: 100%;
    width: 100;
  }
  .product-manage-pc-page {
    .page-com {
      position: relative;
      width: 100%;
      height: 100%;
      overflow-y: auto;
      background: rgb(237, 242, 249);
      padding-top: 80px;
      .main {
        background: #fff;
        width: 1200px;
        margin: 15px auto 0;
        padding: 23px 30px;
        min-height: 500px;
        }
      .banner {
        position: relative;
        width: 100%;
        height: 220px;
        .banner-bg {
          position: relative;
          width: 100%;
          height: 220px;
          object-fit: cover;
        }
        .banner-text {
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          text-align: center;
          transform: translate3d(0, -50%, 0);
          font-size: 38px;
          font-family: "PingFangSC-Light, PingFang SC";
          font-weight: 300;
          color: #ffffff;
          line-height: 53px;
        }
      }
      .resut-title {
        text-align: center;
        font-size: 26px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #37383D;
        line-height: 37px;
        margin-bottom: 16px;
      }
      .sub-title {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597A0;
        line-height: 25px;
        text-align: center;
        margin-bottom: 29px;
      }
      .content-block {
        width: 100%;
        border-top: 1px solid #EAEAEA;
        border-bottom: 1px solid #EAEAEA;
        padding: 29px 0 38px;
        overflow: hidden;
        .content-text {
            width: 100%;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383D;
            line-height: 45px;
            text-indent: 36px;
            margin-bottom: 90px;
            /deep/ img {
                display: inline-block;
                max-width: 100%;
            }
        }
        .source-from {
            width: 100%;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383D;
            line-height: 36px;
            text-align: right;
        }
      }
      .hight-light {
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #9597A0;
        line-height: 25px;
        margin: 29px 0 32px;
        span {
            cursor: pointer;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #3D6CB0;
            line-height: 25px;
            margin-left: 19px;
        }
      }
      .pdf-title {
            position: relative;
            padding-left: 22px;
            height: 36px;
            font-size: 18px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #37383D;
            line-height: 36px;
            margin-bottom: 36px;
            &:after {
              content: "";
              display: block;
              width: 7px;
              height: 25px;
              background-color: #3d6cb0;
              position: absolute;
              left: 0;
              top: 50%;
              transform: translate3d(0, -50%, 0);
            }
        }
        .pdf-box {
            display: flex;
            flex-flow: row nowrap;
            justify-content: flex-start;
            padding-bottom: 116px;
            .pdf-item {
                cursor: pointer;
                width: 195px;
                height: 113px;
                background: #FFFFFF;
                border-radius: 7px;
                border: 1px solid #D4D6DA;
                display: flex;
                flex-flow: column nowrap;
                justify-content: center;
                align-items: center;
                margin-right: 15px;
                img {
                    margin-bottom: 12px;
                }
                .file-name {
                    width: 100%;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    padding: 0 20px;
                    text-align: center;
                }
            }
        }
    }
  }
  /deep/ .el-breadcrumb__inner {
  font-size: 18px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #37383d;
  line-height: 28px;
  cursor: pointer;
}
/deep/ .el-select-dropdown__item {
  font-size: 10px !important;
}
#app .el-pagination.is-background .el-pager li:not(.disabled).active {
  width: 32px !important;
  height: 32px !important;
}

.el-button--primary {
  width: 64px;
  height: 40px;
  padding: 0;
  background: #4677b9;
  border-radius: 5px;
  font-size: 15px;
  font-family: PingFangSC-Medium, PingFang SC;
  border: none;
  font-weight: 500;
}
.el-button--danger {
  background: #4677b9;
  border: none;
}
  @media (min-width: 769px) {
    .product-manage-mobile-page {
      display: none;
    }
    .product-manage-pc-page {
      display: block;
    }
  }
  @media (max-width: 768px) {
    .product-manage-mobile-page {
      display: block;
    }
    .product-manage-pc-page {
      display: none;
    }
  }
  
  </style>
  